<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="theme-color">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>分享家</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/css/mui.css"/>
    <link rel="stylesheet" href="../css/util.css">
    <script src="http://at.alicdn.com/t/font_371407_7omis3wrfr7tx1or.js"></script>
</head>
<link rel="stylesheet" href="../css/pay_deposit.css">
<body>
<header class="fxj-header">
    <back></back>
    <h1 class="fxj-title">支付订金</h1>
</header>

<main id="main">
    <div class="title">付款详情</div>
    <div class="detail-container">
        <div class="line">
            <span>订单总金额</span>
            <span v-text="'￥'+orderDetail.pay_price"></span>
        </div>
        <div class="line tips">
            <span>房租</span>
            <span v-text="'￥'+orderDetail.rent_price"></span>
        </div>
        <div class="line tips">
            <span>住宿意外险</span>
            <span v-text="'￥'+Number(orderDetail.insurance_count) > 0?(Number(orderDetail.insurance_count)-1)*Number(orderDetail.day_total)*0.5:'0'"></span>
        </div>
        <div class="line tips">
            <span>在线支付押金</span>
            <span v-text="'￥'+orderDetail.deposit"></span>
        </div>
        <div class="line margin-more" :class="{disable:!show.couponAble}" @click="showPopup('coupon')">
            <span>优惠券<span class="tips">(仅用于房租)</span></span>
            <span class="line" :class="{tip:show.couponText==='',highlight:show.couponText!==''}" v-cloak>
                {{orderDetail.coupon.length===0?"暂无优惠券":data.usedCoupon==='0'?`${orderDetail.coupon.length}张可用`:show.couponText}}
                <svg class="icon icon-you">
                    <use xlink:href="#icon-you"></use>
                </svg>
            </span>
        </div>
        <div class="line margin-more" :class="{disable:!show.creditsAble}">
            <span @click="showPopup('credits')">
                积分
                <span class="tips" v-cloak>(可用{{~~orderDetail.usablepoint}}积分抵扣{{orderDetail.usablepoint==='0'?'0':~~(orderDetail.usablepoint/100)}}元)</span>
                <svg class="icon">
                    <use xlink:href="#icon-guanyuwomen-copy"></use>
                </svg>
            </span>
            <div id="paySwitch" class="mui-switch mui-switch-mini">
                <div class="mui-switch-handle"></div>
            </div>
        </div>
        <div class="line">
            <span>应付总金额</span>
            <span class="highlight" v-text="'￥'+data.total"></span>
        </div>
    </div>

    <div class="title">付款方式</div>
    <div class="pay-container">
        <div class="line" onclick="setPayWay('3')">
            <span>
                 <svg class="icon">
                    <use xlink:href="#icon-zhifubao"></use>
                </svg>
                <span>支付宝</span>
                <span class="recommend">推荐</span>
            </span>
            <svg class="icon" :class="{selected:data.payWay==='3'}">
                <use xlink:href="#icon-checkbox1" v-show="data.payWay==='3'"></use>
                <use xlink:href="#icon-checkbox" v-show="data.payWay==='4'"></use>
            </svg>
        </div>
        <div class="line" onclick="setPayWay('4')">
            <span>
                <svg class="icon" :class="{selected:data.payWay==='4'}">
                    <use xlink:href="#icon-weixinzhifu"></use>
                </svg>
                <span>微信支付</span>
            </span>
            <svg class="icon" :class="{selected:data.payWay==='4'}">
                <use xlink:href="#icon-checkbox" v-show="data.payWay==='3'"></use>
                <use xlink:href="#icon-checkbox1" v-show="data.payWay==='4'"></use>
            </svg>
        </div>
    </div>

    <div class="affirm-pay" onclick="nowPay()" v-text="'确认支付￥'+data.total"></div>

    <section id="popup" style="display: none" v-show="show.coupon||show.credits" v-cloak>
        <div v-show="show.coupon" id="container-优惠券" class="container">
            <div class="content">
                <div class="title">优惠券</div>
                <ul>
                    <li class="line line-transverse" @click="selectedCoupon('0')">
                        <span>不使用优惠券</span>
                        <svg class="icon" :class="{selected:data.usedCoupon==='0'}">
                            <use xlink:href="#icon-checkbox" v-show="data.usedCoupon!=='0'"></use>
                            <use xlink:href="#icon-checkbox1" v-show="data.usedCoupon==='0'"></use>
                        </svg>
                    </li>
                    <li class="line line-transverse" v-for="coupon of orderDetail.coupon"
                        @click="selectedCoupon(coupon)">
                        <span v-text="'满'+coupon.condition+'减'+coupon.amount+'元'"></span>
                        <svg class="icon" :class="{selected:data.usedCoupon===coupon.ucid}">
                            <use xlink:href="#icon-checkbox" v-show="data.usedCoupon!==coupon.ucid"></use>
                            <use xlink:href="#icon-checkbox1" v-show="data.usedCoupon===coupon.ucid"></use>
                        </svg>
                    </li>
                </ul>
                <p>优惠券仅用于房租抵扣，单笔订单只能使用1个优惠券，使用之后不退换。</p>
            </div>
            <div class="btn" @click="closePopup">确定</div>
        </div>
        <div v-show="show.credits" id="container-积分" class="container">
            <div class="content">
                <div class="title">积分使用规则</div>
                <div>使用范围</div>
                <p>在分享家短租平台预定房间在线支付订金</p>
                <div>使用条件</div>
                <ul>
                    <li>1.订单金额大于10元（含）；</li>
                    <li>2.积分大于100（含）；</li>
                    <li>3.积分抵扣不得超过每笔订单金额的50%；</li>
                    <li>4.100积分抵扣1元，只能使用积分整数倍。</li>
                </ul>
            </div>
            <div class="btn" @click="closePopup">我知道了</div>
        </div>
    </section>
</main>

<script type="text/javascript" src="../lib/js/babel-polyfill.js"></script>
<script type="text/javascript" src="../lib/js/vue.js"></script>
<script type="text/javascript" src="../lib/js/mui.js"></script>
<script type="text/javascript" src="../lib/js/jquery.js"></script>
<script type="text/javascript" src="../script/util.js"></script>

<script src="../script/pay_deposit.js"></script>
</body>
</html>